<template>
  <div class="createPost-container">
    <el-form ref="dataForm" :rules="rules" :model="form" class="form-container">
      <el-form-item prop="category">
        <sticky :z-index="10" :class-name="'sub-navbar draft'">
          <el-row>
            <DictGroupInput ref="dictGroupInput" :value.sync="form.category" dict-group="topic_category" class="filter-item" placeholder="Category" />
            <el-button v-waves v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">Publush</el-button>
            <el-button v-show="!isEdit" v-loading="loading" type="warning" @click="reset">Reset</el-button>
          </el-row>
        </sticky>
      </el-form-item>

      <div class="createPost-main-container">
        <el-row>
          <el-col :span="24">
            <el-form-item prop="title">
              <MDinput v-model="form.title" :maxlength="150" name="name" required>Title</MDinput>
              <span v-show="summaryLength" class="word-counter">{{ summaryLength }}/150</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="4">
            <el-form-item prop="secret">
              <el-checkbox v-model="form.secret">Private</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-top:5px;">
            <el-form-item prop="importance">
              <el-rate v-model="form.importance" :texts="texts" show-text />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item prop="content">
          <MEditor ref="markdownEditor" v-model="form.content" :height="scale * screenWidth + 'px'" />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { createOrUpdateTopic } from '@/api/info/topic'
import waves from '@/directive/waves' // waves directive
import MDinput from '@/components/MDinput'
import Sticky from '@/components/Sticky' // 粘性header组件
import MEditor from '@/views/components/MEditor'
import DictGroupInput from '@/views/components/DictGroupInput'

const defaultForm = {
  title: '',
  category: '',
  content: '',
  importance: 2,
  secret: false
}

export default {
  name: 'Topic',
  components: { MDinput, Sticky, MEditor, DictGroupInput },
  directives: { waves },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: Object.assign({}, defaultForm),
      rules: {
        title: [{ required: true, message: 'title is required', trigger: 'blur' }],
        content: [{ required: true, message: 'content is required', trigger: 'blur' }],
        category: [{ required: true, message: 'category is required', trigger: 'change' }]
      },
      loading: false,
      screenWidth: window.innerHeight,
      scale: 0.55,
      texts: ['不重要', '一般', '重要', '很重要', '相当重要']
    }
  },
  computed: {
    ...mapGetters(['uid']),
    summaryLength() {
      return this.form.title.length
    }
  },
  watch: {
    screenWidth: {
      handler: function(val) {
        console.log('watch:' + val)
        this.screenWidth = val
        if (val > 900) {
          this.scale = 0.7
        } else {
          this.scale = 0.55
        }
      },
      immediate: true
    }
  },
  created() {
    if (this.isEdit) {
      const row = this.$route.params
      this.form = Object.assign({}, row, { createAt: undefined, modifyAt: undefined })
    } else {
      this.form = Object.assign({}, defaultForm, { uid: this.uid })
    }
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        that.screenWidth = window.innerHeight
      })()
    }
  },
  methods: {
    submitForm() {
      console.log(this.form)
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.loading = true
          createOrUpdateTopic(this.form)
            .then(response => {
              this.$notify({
                title: 'Success',
                message: 'save successfully',
                type: 'success',
                duration: 2000
              })
              this.$refs.dictGroupInput.$emit('newDict', this.form.category)
              if (!this.isEdit) {
                this.reset()
              }
              this.$refs.dictGroupInput.$emit('reset', this.form.category)
            })
            .catch(() => {
              this.loading = false
            })
          this.loading = false
        } else {
          return false
        }
      })
    },
    reset() {
      this.$refs['dataForm'].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 0px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    color: grey;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.form-style {
  margin-top: 1%;
  width: 88%;
  margin-left: 6%;
}
</style>
